<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 余额 -->
		<view style="width: 702rpx;height: 290rpx;background-color: #4B9EFF;display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<text style="font-size: 28rpx;color: #FFFFFF;">钱包余额</text>
			<text style="font-size: 60rpx;color: #FFFFFF;margin-top: 20rpx;">￥{{mymoney}}</text>
			<text style="font-size: 28rpx;color: #FFFFFF;margin-top: 20rpx;">充值随机送￥</text>
		</view>

		<!-- 充值金额 -->
		<text style="font-size: 30rpx;color: #333333;margin-top: 49rpx;width: 702rpx;">充值金额</text>
		<!-- 充值金额item -->
		<view  style="width: 702rpx; display: flex;flex-wrap: wrap;justify-content: space-between; align-items: center;margin-top: 11rpx;">
			<view :class="item.money ? item.id === btnid ? 'priceItemSelect' : 'priceItem' : 'priceItemNull' " v-for="(item,index) in rechargesetlist"
			 :key="index" @click="noMultipleClicks(index,item)">
				<text :class="iitem.id === btnid ? 'priceItemTextTopSelect' : 'priceItemTextTop'">
					{{item.money ? '￥' : ''}}{{item.money}}
				</text>
				<text :class="item.id === btnid ? 'priceItemTextBottomSelect' : 'priceItemTextBottom'">
					{{item.senf_money ? '送' : ''}}{{item.senf_money}}{{item.senf_money ? '元' : ''}}
				</text>
			</view>
		</view>
		<!-- 充值金额 -->
		<text style="font-size: 30rpx;color: #333333;margin-top: 49rpx;width: 702rpx;">充值方式</text>
		<!-- 支付方式选择 -->
		<radio-group @change="radioChange" style="margin-top: 31rpx;">
			<label style="width: 702rpx;display: flex;justify-content: space-between;align-items: center;"  v-for="(item,index) in payList"
			 :key="item.title">
				<view style="display: flex;justify-content: center;align-items: center;">
					<image mode="aspectFill" src="../static/wx.png" style="width: 62rpx;height: 62rpx;"></image>
					<text style="font-size: 28rpx;color: #333333;margin-left: 20rpx;">{{item.title}}</text>
				</view>
				<view>
					<radio :value="item.title" :checked="item.title === isPayType" />
				</view>
			</label>
		</radio-group>

		<!-- 充值按钮 -->
		<view style="width: 702rpx;height: 80rpx;margin-top: 85rpx; background-color: #4B9EFF;
		font-size: 30rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;" @click="pay()">立即充值</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnid:0,
				noClick:true,
				order_sn:'',
				mymoney:'',
				rechargesetlist:[],
				recharge:'recharge',
				wechat:'wechat',
				priceList: [{
						price: '100',
						give: '10',
						type: false, //控制选中状态
						isTrueData: true //补充假数据保障样式用得true表示真数据
					},
					{
						price: '200',
						give: '20',
						type: true,
						isTrueData: true
					},
					{
						price: '300',
						give: '30',
						type: false,
						isTrueData: true
					},
					{
						price: '400',
						give: '40',
						type: false,
						isTrueData: true
					},
					{
						price: '500',
						give: '50',
						type: false,
						isTrueData: true
					}
				],
				payList: [{
					title: '微信',
					img: ''
				}],
				isPayType: '微信'

			}
		},
		onHide() {
			console.log(":离开页面 ",);
		},
		onLoad() {
			this.mymoney = this.$Route.query.money		// 接收首页传过来的余额
			this.rechargeSetlist();
			if ((this.priceList.length % 3) > 1) {
				this.priceList.push({
					price: '',
					give: '',
					type: false,
					isTrueData: false
				})
			}
		},
		watch:{
		},
		methods: {
			
			noMultipleClicks(index,item) {
				this.btnid = item.id
			},
 			
			
			// radioChange(e){
			// 	'radio发生change事件，携带value值为：', e.detail.value
			// }
			async rechargeSetlist(){
				let res;
				try {
					res = await this.$request.post('addons/shopro/user/recharge_set_list');
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					return uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
				console.log('userinfo===',res);
				this.rechargesetlist = res.data.data;
			},
			// goPay(item){
			// 	console.log("item: ",item);
			// 	this.btnid = item.id
			// },
			async pay(){
				// uni.showLoading({
				// 	title:"loading..."
				// })
				let res
				try {
					res = await this.$request.post('addons/shopro/user/recharge',{
						data:{
							// type:this.recharge,
							// order_sn:202112561024963325001000,
							// payment:this.wechat
							recharge_set_id:this.btnid,
							// num:100
						},
					});
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					return uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
				this.order_sn = res.data.data.order_sn;
				console.log("this.order_sn: ",this.order_sn);
				this.paybuy();
			},
			async paybuy(){
				
				let res
				try {
					res = await this.$request.post('addons/shopro/pay/prepay',{
						data:{
							type:'recharge',
							order_sn: this.order_sn,
							payment:'wechat'
						},
						header:{
							platform:'wxMiniProgram'
						}
					});
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					return uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
				console.log("res=============: ",res);
				uni.requestPayment({
					provider: 'wxpay', //支付商家
					timeStamp: res.data.data.pay_data.timeStamp, //支付时间戳。当前时间
					nonceStr: res.data.data.pay_data.nonceStr, //支付密钥
					package: res.data.data.pay_data.package, //支付id
					signType: res.data.data.pay_data.signType, //加密方式默认MD5
					paySign: res.data.data.pay_data.paySign, //支付签名
					success: res => {
						console.log('success:' + JSON.stringify(res));
						uni.$showMsg('支付成功');
					},
					fail: err => {
						uni.$showMsg('支付失败');
						console.log("err: ",err);
						console.log('fail:' + JSON.stringify(err));
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 充值金额默认样式 */
	.priceItem {
		width: 224rpx;
		height: 120rpx;
		border: 1px solid #499CFF;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.priceItemTextTop {
			font-size: 34rpx;
			color: #333333;
		}

		.priceItemTextBottom {
			font-size: 24rpx;
			color: #999999;
		}

	}

	/* 充值金额被选中的样式 */
	.priceItemSelect {
		width: 224rpx;
		height: 120rpx;
		border: 1px solid #499CFF;
		background-color: #4B9EFF;
		margin-top: 20rpx;
		display: flex;
		color: #FFFFFF;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.priceItemTextTopSelect {
			font-size: 34rpx;
			color: #FFFFFF;
		}

		.priceItemTextBottomSelect {
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	// 假数据
	.priceItemNull {
		width: 224rpx;
		height: 120rpx;
		margin-top: 20rpx;
	}
</style>
